<template>
    <div class="max">
        <sapn class="issue">选择问题类型（必填）</sapn>
        <div class="message">
            <div class="m1">
                <div class="cz">
                    <p class="xx">到店就餐</p>
                </div>
                <img src="/static/imgs_s06/s06_opt-for.png" alt="" class="img1">
            </div>
            <div class="m1">
                <div class="cz">
                    <p class="xx">到店取餐</p>
                </div>
                <img src="/static/imgs_s06/s06_ circle.png" alt="" class="img1">
            </div>
            <div class="m1">
                <div class="cz">
                    <p class="xx">外送订单</p>
                </div>
                <img src="/static/imgs_s06/s06_ circle.png" alt="" class="img1">
            </div>
            <div class="m1">
                <div class="cz">
                    <p class="xx">会员积分相关</p>
                </div>
                <img src="/static/imgs_s06/s06_ circle.png" alt="" class="img1">
            </div>
            <div class="m1">
                <div class="cz">
                    <p class="xx">优惠券相关</p>
                </div>
                <img src="/static/imgs_s06/s06_ circle.png" alt="" class="img1">
            </div>
            <div class="m1">
                <div class="cz">
                    <p class="xx">餐厅服务</p>
                </div>
                <img src="/static/imgs_s06/s06_ circle.png" alt="" class="img1">
            </div>
            <div class="m1">
                <div class="cz">
                    <p class="xx">其它问题</p>
                </div>
                <img src="/static/imgs_s06/s06_ circle.png" alt="" class="img1">
            </div>

        </div>
        <sapn class="issue">本次用餐评价（选填）</sapn>
        <div class="star">
            <img class="f" src="/static/imgs_s06/s06_five-stars.png" alt="">
            <img class="f" src="/static/imgs_s06/s06_five-stars.png" alt="">
            <img class="f" src="/static/imgs_s06/s06_five-stars.png" alt="">
            <img class="f" src="/static/imgs_s06/s06_five-stars.png" alt="">
            <img class="f" src="/static/imgs_s06/s06_five_stars1.png" alt="">
        </div>
        <sapn class="issue">问题描述（必填）</sapn>
        <input class="input1" type="text" placeholder="请输入标题 （例：消费积分未到账）">
        <input class="input2" type="text" placeholder="请输入标题 简要描述您的问题和建议（选填）">
        <sapn class="issue">问题描述（选填）</sapn>
        <input class="input3" type="text" placeholder="请填写相关餐厅名称">
        <sapn class="issue">问题描述（选填）</sapn>
        <input class="input3" type="text" placeholder="请选择用餐时间">
        <span>提交反馈</span>
        <!-- button最好都不要用 小程序有自己自带的样式 -->
    </div>
</template>
<script>
export default {
  data() {
    return {};
  },

  components: {},

  methods: {},

  created() {
    // let app = getApp()
  }
};
</script>
    <style>
        

        .max {
            display: flex;
            flex-direction: column;
            background: #eee;
        }

        .issue {
            font-size: 13px;
            font-family: "PingFang SC";
            font-weight: 500;
            color: rgba(115, 115, 115, 1);
            margin: 17px 0 15px 14px;
        }

        .message {
            width: 100%;
            height: 350px;
            background: white;
            display: flex;
            flex-direction: column;
        }

        .m1 {
            position: relative;
            width: 100%;
            height: 49px;
            border-bottom: 1px solid #eee;
        }

        .cz {
            width: 79px;
            height: 12px;
            margin: 19px 0 18px 12px;
        }

        .xx {
            font-size: 13px;
            font-family: "PingFang SC";
            font-weight: 500;
            color: rgba(0, 0, 0, 1);
        }

        .img1 {
            position: absolute;
            right: 13px;
            top: 20px;
            width: 18px;
            height: 18px;
        }

        .star{
            width: 100%;
            height: 54px;
            background: white;
            text-align: center;
        }

        .f{
            width: 19px;
            height: 18px;
            margin-top: 18px;
            margin-right: 14px;
        }

        .suggest{
            width: 100%;
            height: 119px;
            background: white;
        }
        .issue+input{
            font-size: 13px;
        }
        .input1{
            width: 100%;
            height: 64px;
        }

        .input2{
            width: 100%;
            height: 136px;
            font-size: 13px;
        }
        .input::-webkit-input-placeholder{
            font-size:13px;
            font-family:"PingFang SC";
            font-weight:500;
            color:rgba(163,165,168,1);
        }
        
        .input1::-webkit-input-placeholder{
            padding-left: 14px;
            padding-bottom: 33px;
        }

        .input2::-webkit-input-placeholder{
            padding-left: 14px;
            padding-top: 33px;
        }

        .input3{
            width:100%;
            height:48px;
            background:rgba(255,255,255,1);
        }

        .input3::-webkit-input-placeholder{
            padding-left: 14px;
        }



        .input3+span{
            text-align: center;
            line-height: 45px;
            width:100%;
            height:45px;
            display: inline-block;
            background:rgba(50,178,108,1);
            font-size:13px;
            font-family:"PingFang SC";
            font-weight:500;
            color:rgba(255,255,255,1);
        }


    </style>
